<template>
    <div class="container">
        <headMenu />
        <a-card class="general-card" :title="title">
            <!-- 查询表单 -->
            <a-form ref="formRef" :model="queryData" layout="inline" @submit="getList">
                <a-form-item v-for="item in query" :field="item.dataIndex" :label="item.title">
                    <!-- 输入框 -->
                    <a-input v-if="item.type === formType.input" v-model="queryData[item.dataIndex]"
                        :placeholder="`请输入${item.title}`" />
                    <!-- 日期区间选择器 -->
                    <a-range-picker v-if="item.type === formType.selectorTime" showTime :time-picker-props="{
                            defaultValue: ['00:00:00', '00:00:00']
                        }" @clear="onSelectClear(item.dataIndex)" value-format="YYYY-MM-DD HH:mm:ss" @select="onSelect"
                        @ok="onOk(item.dataIndex)" />
                    <!-- 下拉框 -->
                    <a-select :allow-clear="true" v-if="item.type === formType.select" :placeholder="`请选择${item.title}`"
                        v-model="queryData[item.dataIndex]">
                        <a-option v-for="selectItem in item.selectData" :value="selectItem.value">{{
                            selectItem.name }}</a-option>
                    </a-select>
                    <!-- 自定义组件 -->
                    <component v-if="item.type === formType.component" :is="item.component"
                        v-model="queryData[item.dataIndex]"></component>

                </a-form-item>
                <a-form-item>
                    <a-button :loading="loading" html-type="submit" type="primary">查询</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button @click="() => { $refs.formRef.resetFields(); getList() }">重置</a-button>
                </a-form-item>
            </a-form>
            <!-- 操作按钮 -->
            <a-space style="margin-top: 15px;display: flex;justify-content: space-between;">
                <div style="">
                    <a-button v-if="fromData" type="primary" @click="addOpen">新增</a-button>
                    <a-button v-if="deleteApi" style="margin-left: 20px;" @click="deleteBath(selectedKeys)"
                        :disabled="selectedKeys.length == 0">批量删除</a-button>
                    <!-- 左边的插槽 -->
                    <slot  :getList="getList" name="tableLeft"></slot>
                </div>
                <div>
                    <!-- 右边的插槽 -->
                    <slot :data="queryData" name="tableRight"></slot>
                    <a-button v-if="exportApi"  type="outline" @click="exportT">导出</a-button>
                </div>
            </a-space>
            <a-table :loading="loading" class="marginTop" :row-key="rowSelection.rowkey"
                v-model:selected-keys="selectedKeys" :data="dataList" :pagination="false" :row-selection="JSON.stringify(rowSelection)=='{}'?'':rowSelection">
                <template #columns>
                    <a-table-column v-for="item in table"   align="center" :width="200" :title="item.title" :data-index="item.dataIndex">
                        <template #cell="{ record }" v-if="tableType.htmlText === item.type">
                            {{ item.htmlText([record[item.dataIndex]]) }}
                        </template>
                        <template #cell="{ record }"  v-if="tableType.html === item.type">
                          <span v-html="item.html([record[item.dataIndex]])"></span>
                        </template>
                        <template #cell="{ record }" v-if="tableType.img === item.type">
                            <a-image :height="item.height" v-if="record[item.dataIndex]" :src="record[item.dataIndex]" />
                        </template>
                        <template #cell="{ record }" v-if="tableType.slot === item.type">
                            <slot :name="item.dataIndex" :data="record"></slot>
                        </template>
                    </a-table-column>


                    <a-table-column title="操作">
                        <template #cell="{ record }">
                            <div class="flex-action">
                                <a-button  v-if="fromData"  class="margin-right20px" @click="editOpen(record)" type="outline"> <template
                                        #icon>
                                        <icon-edit />
                                    </template></a-button>
                                    <slot name="editBtn" :data="record" :getList="getList" ></slot>
                                <a-popconfirm v-if="deleteApi" content="Are you sure you want to delete?"
                                    @ok="deleteBath([record[rowSelection.rowkey]])">
                                    <a-button>
                                        <template #icon>
                                            <icon-delete />
                                        </template>
                                    </a-button>
                                </a-popconfirm>
                            </div>
                        </template>
                    </a-table-column>

                </template>
            </a-table>
            <a-pagination style="margin-top: 20px;" :total="queryData.counts" v-model:current="queryData.page"
                :show-total="true" :show-more="true" v-model:page-size="queryData.pageSize" show-page-size @change="getList"
                @page-size-change="getList" />
        </a-card>

        <popUps v-if="fromData" ref="openDloag" :fromData="fromData" :fromRowData="fromRowData" :callBack="callBackF" />
    </div>
</template>
<script lang="ts" setup>
import { PropType, ref } from 'vue';
import tableType from './type/tableType';
import formType from './type/formType';
import { Message } from '@arco-design/web-vue';
const openDloag = ref()
const loading = ref(true)

interface tableT {
    title: string;
    dataIndex: string;
    type: tableType
    htmlText?: Function
}

interface queryT {
    name: string;
    field: string;
    type: string;
    selectData?: Array<Object>
}

interface fromT {
    title: string;
    dataIndex: string;
    type: formType;
    selectData?: Array<Object>
}




const prop = defineProps({
    //表格
    table: {
        type: Array as PropType<tableT[]>,
        default() {
            return [];
        },
    },
    //传入获取API接口
    getDataApi: {
        type: Function
    },
    //添加修改API接口
    updateAndAddApi: {
        type: Function
    },
    //删除API接口
    deleteApi: {
        type: Function
    },
    //导出接口
    exportApi: {
        type: Function
    },
    //查询
    query: {
        type: Array as PropType<queryT[]>,
        default() {
            return [];
        },
    },
    //表头
    title: {
        type: String,
        default: "查询列表"
    },
    //表单
    fromData: {
        type: Array as PropType<fromT[]>,
        default() {
            return undefined;
        },
    },
    //选择
    rowSelection: {
        type: Object,
        //是否开启批量删除 默认开启
     openBachDelete:{
         type:Boolean,
         
     },
     
        //是否开启删除 默认开启
        openDelete:{
         type:Boolean
     } 
    }
})
//选择id
const selectedKeys = ref([])

//批量删除
const deleteBath = (ids) => {
    const selectIds = [...ids]
    prop.deleteApi(selectIds).then(res => {
        if (res.data.t) {
            Message.success("操作成功");
            queryData.value.page = 1
            getList()
        } else {
            Message.error("操作失败")
        }
    })
}

const formRef = ref()

const queryData = ref({
    startTime: "",
    entTime: "",
    counts: 0,
    page: 1,
    pageSize: 10,
    pages: 0,
})


const dataList = ref([])

//获取数据
const getList = () => {
    loading.value=true
    prop.getDataApi(queryData.value).then(({ data }) => {
        queryData.value = { ...queryData.value, ...data.data }
        dataList.value = data.t
    }).finally(() => {
        loading.value = false
    })
}

//获取数据
getList()

const fromRowData = ref({})


//弹窗打开
const editOpen = (item: Object) => {
    fromRowData.value = JSON.parse(JSON.stringify(item))
    openDloag.value.open(false)
}

//新增打开
const addOpen = () => {
    fromRowData.value = {}
    openDloag.value.open(true)
}

const callBackF = (item: object) => {
    prop.updateAndAddApi(item).then(res => {
        if (res.data.t) {
            Message.success("操作成功");
            getList()
        } else {
            Message.error("操作失败")
        }
    })
}

//区间日期选择器
const onSelect = (dateString, date) => {
    //  console.log('onSelect', dateString, date);
    if (dateString === undefined) {
        queryData.value.startTime = ""
        queryData.value.entTime = ""
    } else {
        queryData.value.startTime = dateString[0]
        queryData.value.entTime = dateString[1]
    }
}

//日期确认
const onOk = (dataIndex) => {
    // console.log("onOk", queryData, dataIndex);
    queryData.value["start_" + dataIndex] = queryData.value.startTime
    queryData.value["end_" + dataIndex] = queryData.value.entTime
    queryData.value.startTime = ""
    queryData.value.entTime = ""
    //console.log("queryData.value", queryData.value);

}
//时间清空
const onSelectClear = (dataIndex) => {
    queryData.value["start_" + dataIndex] = ""
    queryData.value["end_" + dataIndex] = ""
}

//数据导出
const exportT = () => {
    window.location.href = "/api" + prop.exportApi(queryData.value)
    Message.success("数据导出");

}
</script>
<style scoped lang="less">
.marginTop {
    margin-top: 20px;
}

.flex-action {
    // display: flex;
    // align-items:baseline;
}

.margin-right20px {
    margin-right: 20px;
}

.container {
    padding: 0 20px 20px 20px;
}

:deep(.arco-table-th) {
    &:last-child {
        .arco-table-th-item-title {
            margin-left: 16px;
        }
    }
}
</style>